<template>
  <div>
    <!-- 头像 -->
    <img src="../../assets/img/touxiang.webp" class="tx" />

    <!-- 登录注册按钮 -->
    <div style="margin-top: 10px">
      <button class="btn1" @click="$router.push('/zhuce')">注册</button>
      <button class="btn2" @click="$router.push('/login')">登录</button>
    </div>

    <!-- 灰色空白间距 -->
    <div
      style="background-color: #efefef; height: 10px; margin-top: 20px"
    ></div>

    <!-- 四个列表 -->
    <div class="tu">
      <div>
        <img src="../../assets/img/tu1.png" />
        <span>我的商品</span>
      </div>
      <div>
        <img src="../../assets/img/tu2.png" />
        <span>我的优惠</span>
      </div>
      <div>
        <img src="../../assets/img/tu3.png" />
        <span>我的贴吧</span>
      </div>
      <div>
        <img src="../../assets/img/tu4.png" />
        <span>我的收藏</span>
      </div>
    </div>

    <!-- 灰色空白间距 -->
    <div
      style="background-color: #efefef; height: 10px; margin-top: 20px"
    ></div>

    <!-- 消息通知 -->
    <div class="tu">
      <div>
        <img src="../../assets/img/tu6.png" />
        <span>消息通知</span>
      </div>

      <!-- 灰色空白间距 -->
      <div
        style="background-color: #efefef; height: 10px; margin-top: 10px"
      ></div>

      <!-- 设置 -->
      <div class="tu">
        <img src="../../assets/img/tu7.png" />
        <span class="sz" @click="exitLogin">退出登录</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import router from "@/router";
import store from "@/store";
import storage from "@/utils/storerage";
import { showNotify } from "vant";
import "vant/es/notify/style";

function exitLogin() {
  localStorage.removeItem(storage.KEY.Authorization);
  storage.localStorageRemove(storage.KEY.UserInfo);
  storage.sessionStorageRemove(storage.KEY.UserInfo);
  localStorage.removeItem(storage.KEY.Checked);
  store.commit("deleteUserInfo");
  showNotify({ type: "success", message: "退出登录成功" });
  router.push("/login");
}
</script>

<style lang="scss">
.tx {
  display: block;
  margin: 0 auto;
  margin-top: 20px;
  width: 100px;
}
button {
  width: 80px;
  border-radius: 5px;
  border-color: transparent;
  color: #fff;
  height: 30px;
}
.btn1 {
  margin-left: 100px;
}
.btn2 {
  background-color: #2984f8;
  margin-left: 20px;
}
.tu img {
  width: 50px;
  height: 50px;
  margin-left: 20px;
  margin-top: 10px;
}
.tu div {
  display: flex;
  height: 60px;
}
.tu span {
  margin-top: 25px;
  margin-left: 10px;
}
.tu span::after {
  content: ">";
  color: #ddd;
  font-size: 20px;
  margin-left: 200px;
}
.tu .sz::after {
  content: ">";
  color: #ddd;
  font-size: 20px;
  margin-left: 230px;
}
</style>
